<%--
  Created by IntelliJ IDEA.
  User: kiss2
  Date: 2025/4/24
  Time: 15:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>编辑商品</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        accent: '#10b981',
                        neutral: '#f1f5f9',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .form-input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .form-label {
                @apply block text-sm font-medium text-gray-700 mb-1;
            }
            .form-input {
                @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm form-input-focus transition duration-200;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-3xl">
    <!-- 页面标题 -->
    <div class="mb-8 text-center">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 flex items-center justify-center">
            <i class="fa fa-pencil-square-o text-primary mr-3" aria-hidden="true"></i>
            编辑商品
        </h2>
        <p class="text-gray-500 mt-2">修改商品信息并保存更改</p>
    </div>

    <!-- 表单卡片 -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg">
        <form action="<c:url value='/goods/edit'/>" method="post" class="p-6 md:p-8">
            <input type="hidden" name="gid" value="${goods.gid}">

            <!-- 表单网格布局 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 学科名字 -->
                <div>
                    <label for="gname" class="form-label">
                        <i class="fa fa-book text-primary mr-1" aria-hidden="true"></i>学科名字
                    </label>
                    <input type="text" id="gname" name="gname" value="${goods.gname}"
                           class="form-input" required>
                </div>

                <!-- 价格 -->
                <div>
                    <label for="price" class="form-label">
                        <i class="fa fa-money text-primary mr-1" aria-hidden="true"></i>价格
                    </label>
                    <input type="number" step="0.01" id="price" name="price" value="${goods.price}"
                           class="form-input" required>
                </div>

                <!-- 类型 -->
                <div>
                    <label for="type" class="form-label">
                        <i class="fa fa-tags text-primary mr-1" aria-hidden="true"></i>类型
                    </label>
                    <input type="text" id="type" name="type" value="${goods.type}"
                           class="form-input" required>
                </div>

                <!-- 作者 -->
                <div>
                    <label for="author" class="form-label">
                        <i class="fa fa-user text-primary mr-1" aria-hidden="true"></i>作者
                    </label>
                    <input type="text" id="author" name="author" value="${goods.author}"
                           class="form-input" required>
                </div>

                <!-- 图片 -->
                <div>
                    <label for="img" class="form-label">
                        <i class="fa fa-image text-primary mr-1" aria-hidden="true"></i>图片URL
                    </label>
                    <input type="text" id="img" name="img" value="${goods.img}"
                           class="form-input">
                </div>

                <!-- 视频链接 -->
                <div>
                    <label for="video" class="form-label">
                        <i class="fa fa-video-camera text-primary mr-1" aria-hidden="true"></i>视频链接
                    </label>
                    <input type="url" id="video" name="video" value="${goods.video}"
                           class="form-input">
                </div>

                <!-- 时长 -->
                <div>
                    <label for="duration" class="form-label">
                        <i class="fa fa-clock-o text-primary mr-1" aria-hidden="true"></i>时长
                    </label>
                    <input type="text" id="duration" name="duration" value="${goods.duration}"
                           class="form-input" placeholder="例如: 60分钟">
                </div>
            </div>

            <!-- 描述（占满一行） -->
            <div class="mt-6">
                <label for="describe1" class="form-label">
                    <i class="fa fa-file-text-o text-primary mr-1" aria-hidden="true"></i>描述
                </label>
                <textarea id="describe1" name="describe1" rows="4"
                          class="form-input">${goods.describe1}</textarea>
            </div>

            <!-- 提交按钮 -->
            <div class="mt-8 flex justify-end space-x-4">
                <button type="button" onclick="history.back()"
                        class="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition duration-200">
                    <i class="fa fa-arrow-left mr-2" aria-hidden="true"></i>取消
                </button>
                <button type="submit"
                        class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 focus:ring-4 focus:ring-primary/30 transition duration-200">
                    <i class="fa fa-save mr-2" aria-hidden="true"></i>保存更改
                </button>
            </div>
        </form>
    </div>

    <!-- 页脚 -->
    <div class="mt-8 text-center text-gray-500 text-sm">
        <p>© 2025 商品管理系统 | 编辑商品页面</p>
    </div>
</div>

<!-- 简单的表单验证脚本 -->
<script>
    document.querySelector('form').addEventListener('submit', function(e) {
        const requiredFields = this.querySelectorAll('[required]');
        let isValid = true;

        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                isValid = false;
                field.classList.add('border-red-500');
                field.classList.add('focus:border-red-500');
                field.classList.add('focus:ring-red-200');

                // 添加错误提示
                if (!field.nextElementSibling || !field.nextElementSibling.classList.contains('text-red-500')) {
                    const errorMsg = document.createElement('p');
                    errorMsg.className = 'text-red-500 text-xs mt-1';
                    errorMsg.textContent = '此字段为必填项';
                    field.parentNode.insertBefore(errorMsg, field.nextSibling);
                }
            } else {
                // 移除错误状态
                field.classList.remove('border-red-500');
                field.classList.remove('focus:border-red-500');
                field.classList.remove('focus:ring-red-200');

                if (field.nextElementSibling && field.nextElementSibling.classList.contains('text-red-500')) {
                    field.nextElementSibling.remove();
                }
            }
        });

        if (!isValid) {
            e.preventDefault();
            // 滚动到第一个错误字段
            const firstError = this.querySelector('.border-red-500');
            if (firstError) {
                firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                firstError.focus();
            }
        }
    });

    // 实时移除错误状态
    document.querySelectorAll('input, textarea').forEach(field => {
        field.addEventListener('input', function() {
            if (this.classList.contains('border-red-500')) {
                this.classList.remove('border-red-500');
                this.classList.remove('focus:border-red-500');
                this.classList.remove('focus:ring-red-200');

                if (this.nextElementSibling && this.nextElementSibling.classList.contains('text-red-500')) {
                    this.nextElementSibling.remove();
                }
            }
        });
    });
</script>
</body>
</html>
